<template>
  <div class="app-container">
    <content-card>
      <div class="filter-container">
        <el-input
          v-model="listQuery.username"
          size="small"
          placeholder="请输入用户名"
          clearable
          class="filter-item w-200"
        />
        <el-input
          v-model="listQuery.mobile"
          size="small"
          placeholder="请输入手机号"
          clearable
          class="filter-item w-200"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="refresh"
          >
            重置
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add"
          >
            新增
          </el-button>
        </el-button-group>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        class="table-container"
        highlight-current-row
      >
        <el-table-column
          fixed
          label="ID"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column
          label="登录账号"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.account }}
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column
          label="邮箱"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column
          label="IP地址"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.last_login_ip }}
          </template>
        </el-table-column>
        <el-table-column
          label="上次登录"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.last_login_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="del(scope)"
              >
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
    </content-card>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType === 'modify' ? '修改' : '新增'"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="temp.account" placeholder="请输入登录账号" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="username">
          <el-input v-model="temp.username" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="temp.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="temp.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="temp.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="用户角色">
          <el-drag-select v-model="temp.user_roles" style="width:400px;" placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.display_name" :value="item.id" />
          </el-drag-select>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { getList, getIdInfo, store, del } from '@/api/user'
import { get_roles as getRole } from '@/api/role'
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import ContentCard from '@/components/ContentCard'

const _temp = {
  id: '',
  user_roles: [],
  username: '',
  account: '',
  password: '',
  role: [],
  email: '',
  status: 1
}

export default {
  components: {
    ContentCard,
    Pagination,
    ElDragSelect
  },
  data() {
    return {
      total: 0,
      list: [],
      roles: [],
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      },
      temp: Object.assign({}, _temp),
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      rules: {
        account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    this.fetchRole()
  },
  methods: {
    search() {
      this.fetchData()
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total_count
        this.listLoading = false
      })
    },
    fetchRole() {
      getRole().then(res => {
        this.roles = res.data.list
      })
    },
    resetTemp() {
      this.temp = Object.assign({}, _temp)
    },
    add() {
      this.resetTemp()
      this.rules.password = [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
      this.dialogVisible = true
      this.dialogType = 'create'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    edit(scope) {
      this.resetTemp()
      this.rules.password = []
      this.dialogVisible = true
      this.dialogType = 'modify'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      getIdInfo(scope.row.id).then(res => {
        this.temp = res.data.info
      })
    },
    changeStatus(value, scope) {
      setTimeout(() => {
        this.list[scope.$index].status = value
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }, 300)
    },
    del(scope) {
      this.$confirm('确认删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(scope.row.id).then(response => {
          setTimeout(() => {
            this.list.splice(scope.$index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }, 300)
        })
      })
    },
    submit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return
          }
          this.loading = true
          store(this.temp).then(res => {
            setTimeout(() => {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.loading = false
            }, 300)
          }).catch(e => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
